<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple" style="text-align: center">
        <h2>采购入库</h2>
      </div></el-col>
    </el-row>
    <br><br>

    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple-light">
        <el-form ref="form" label-width="80px">
        <el-form-item label="供应商" prop="providerName">
          <el-select v-model="ruleForm.providerName" placeholder="请选择供应商">
            <div v-for="item in ruleForm.providerNames" :key="item.id">
              <el-option :label="item.providerName" :value="item.providerName"></el-option>
            </div>
          </el-select>
        </el-form-item>
        </el-form>
      </div></el-col>

      <el-col :span="12"><div class="grid-content bg-purple-light">
        <span>采购人:&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>{{ruleForm.buyUser}}</span>
      </div></el-col>
    </el-row>
    <br><br>

    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple">
        <span>采购物品</span>
      </div></el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple">
        <el-table
            :data="buyListDtoList"
            border
            style="width: 100%">
          <el-table-column
              prop="cargoName"
              label="商品名称"
              width="320">
          </el-table-column>
          <el-table-column
              prop="cargoFactory"
              label="厂家"
              width="320">
          </el-table-column>
          <el-table-column
              prop="cargoBuyMoney"
              label="建议采购价"
              width="320">
          </el-table-column>
          <el-table-column
              prop="goSaleMoney"
              label="建议销售价"
              width="320">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="采购数量"
              width="150">
            <template slot-scope="scope">
              <el-input @keyup.13.native="selectClick(scope.row)" v-model.number="scope.row.buyListNumber" style="width: 100px"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="150">
            <template slot-scope="scope">
              <el-button @click="deleteCargo(scope.row)" type="text" size="small">移除商品</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div></el-col>
    </el-row>
    <br><br><br>

    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple" style="text-align: center;line-height: 20px">
        <el-button type="primary" @click="addCargo" style="margin: 40px">添加商品</el-button>
        <el-button type="primary" @click="onSubmit" style="margin: 40px">入库</el-button>
      </div></el-col>
    </el-row>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
      <div v-if="addCargos"><AddBuyCargo @init="init" @close="handleClose"></AddBuyCargo></div>
    </el-dialog>
  </div>
</template>

<script>
import AddBuyCargo from "@/components/AddBuyCargo";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Buy",
  components:{
    AddBuyCargo
  },
  data(){
    return {
      buyListDtoList:[],
      addCargos:false,
      dialogVisible: false,
      ruleForm: {
        providerNames:'',
        providerName:'',
        buyUser:JSON.parse(sessionStorage.getItem("user")).realName,
        buyListNumber: ''
      },
    };
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      console.log("哈哈哈哈")
      let url = 'apj/provider/selectProviderNames'
      console.log(url)
      this.$axios.get(url).then(r=>{
        this.ruleForm.providerNames = r.data
        console.log(r.data)
      })
      let urj = 'apj/buyshorttime/selectAllBuyShortTime'
      this.$axios.get(urj).then(r=>{
        this.buyListDtoList = r.data
        console.log(r.data)
      })
    },
    selectClick(val){
      let url = 'apj/buyshorttime/updateNumber/'+val.cargoName+'/'+val.cargoFactory+'/'+val.buyListNumber
      this.$axios.get(url).then(r=>{
        this.$message.warning(r.data)
      })
    },
    addCargo(){
      this.dialogVisible = true
      this.addCargos = true
    },
    deleteCargo(val){
      let url = 'apj/buyshorttime/deleteBuyCargo/'+val.cargoName+'/'+val.cargoFactory
      this.$axios.get(url).then(r=>{
        this.$message.success(r.data)
      })
      this.init()
    },
    onSubmit(){
      let url = 'apj/buyshorttime/insertIntoFactory/'+this.ruleForm.providerName+'/'+this.ruleForm.buyUser
      this.$axios.get(url).then(r=>{
        this.$message.success(r.data)
      })
      this.init()
    },
    handleClose(){
      this.dialogVisible = false
      this.addCargos = false
      this.deleteCargos = false
    }
  }
}
</script>

<style scoped>

</style>